<template>
  <div class="page" v-if="res">
    <div class="head">
      <h1>{{ $t('拍卖') }} #{{ res.name }}</h1>
    </div>
    <div class="panel">
      <div class="monkey" >
        <van-swipe class="goods-swipe" :autoplay="3000">
          <van-swipe-item v-for="thumb in goodsinfo.banner" :key="thumb">
            <img :src="thumb" >
          </van-swipe-item>
      </van-swipe>
      </div>
      <div class="auction">
        <div class="price" @click="price = res.coin + 1">
          <h3>{{ res.coin }} {{ res.nickName || '猴毛' }} </h3>
          <span>{{ $t('当前价') }}</span>
        </div>
        <div class="count-down">
          <h3>
         
            <count-down :currentTime="Number(res.sysTime)" :startTime="Number(res.startTime)" :endTime="Number(res.endTime)" :startCb="startCb" :endCb="endCb" :endText="$t('竞拍结束')"></count-down>
             
          </h3>
          <span>{{ res.status == 1 ? $t('即将开拍') : $t('剩余时间') }}</span>
        </div>
      </div>
      <div class="records" v-if="recordList.length > 0">
        <h3>{{ $t('竞拍纪录') }}</h3>
        <ul class="table">
          <li v-for="(item,index) in recordList" :key="index">
            <div>{{ item.nickName }}</div>
            <div>{{ item.coin }} {{ res.nickName || '猴毛' }} </div>
            <div>{{ item.createTime | formatTime1 }}</div>
          </li>
        </ul>
        <div class="total">{{ recordLen }} {{ $t('次竞拍') }}</div>
      </div>
      <div class="rules">        
        <van-cell title="查看商品详情" />
    <div v-for="thumb in goodsinfo.facade" :key="thumb"><img :src="thumb"  style="width:100%;"></div>
      </div>
    </div>
    <div class="bar">
      <group gutter="0" class="input">
        <x-number v-model="price" fillable align="left" :min="1"></x-number>
      </group>
      <x-button class="buy" @click.native="buy" :disabled="!isSelling" type="primary">{{ $t('出价') }}</x-button>
    </div>
  </div>
</template>

<script>
  import {
    XNumber,
    Group,
    XButton,
    TransferDomDirective as TransferDom,
    XDialog
  } from 'vux'
   import Swiper from 'swiper'
  import './common/swiper.min.css'
  import CountDown from './common/countDown.vue'
  //import CountDown from './common/vue2-countdown.vue'
  export default {
    components: {
      XNumber,
      Group,
      XButton,
      CountDown,
      XDialog
    },
    directives: {
      TransferDom
    },
    data() {
      return {
        price: 0,
        
        goodsinfo:{
        banner:[
        	'http://pic.bz521.com/xrp/hql/5.5.neiku.jpg',
            'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
          	'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
            ],
        facade:[
            'http://pic.bz521.com/xrp/hql/5.5.neiku.jpg',
            'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
          'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
            ],
        },
        res: {
            name: '',                     
            status:'',
          },
        timer: null,
        recordList: [],
        recordLen: 0,
        isSelling: false,
      }
    },
    computed: {},
    mounted() {
      // TODO 拍卖进行中再开始轮
      this.$nextTick(function() {
     // console.log(1)
        this.id = this.$route.params.id
        this.initData();
      });
    },
    beforeDestroy() {
      clearInterval(this.timer);
    },
    methods: {
    
      initData() {
      
      	this.$http
          .get(`/auction/item/${this.id}`)
          .then(res => {
            if (res.code == 200) {
            //console.log(res.result)
              this.res = res.result;
             console.log(this.res)
              this.recordList = res.result.list;
              this.res.startTime = res.result.startTime;
              this.res.endTime = res.result.endTime;
               this.res.sysTime = res.result.sysTime;
              this.recordLen = res.result.total;
              if (this.price == 0) {
                this.price = res.result.coin + 1
              }
              
              this.$http
          .get(`/goods/item/` + res.result.goodsId)
          .then(res => {
            if (res.code == 200) {
              this.res = res.result;
              
            } else {}
          })
          .catch(function(error) {});
            } else {}
          })
          .catch(function(error) {});
          
        
      },
      refresh() {
        this.$http
          .get(`/auction/item/${this.id}`)
          .then(res => {
            if (res.code == 200) {
              this.res.coin = res.result.coin;
               this.recordList = res.result.list;
              this.recordLen = res.result.total;
              this.res.endTime = res.result.endTime;
               this.res.sysTime = res.result.sysTime;
            } else {}
          })
          .catch(function(error) {});
      },
      
      // 开始拍卖
      startCb() {
        // console.log('startCb')
        this.isSelling = true;
        this.res.status = 0;
        if (!this.timer) {
          this.timer = setInterval(() => {
            this.refresh()
          }, 1000)
        }
      },
      // 结束拍卖
      endCb() {
        // console.log('endCb')
        this.isSelling = false;
        clearInterval(this.timer);
      },
      buy() {
      	var token = localStorage["token_2"];
      	if(!token){
      	this.$vux.confirm.show({
      		title: `你没有登录，是否登录`,
      		onConfirm() {
      			this.$router.push('/login')
      		},
      		 onCancel() {
            that.$vux.toast.text('已取消')
          }
      		
      	})
      	
      	}
        var that = this;
        if (this.price <= this.res.coin) {
          that.$vux.toast.text('出价必须大于当前价！')
          that.price = that.res.coin + 1;
          return
        }
        //console.log(that.id)
        this.$vux.confirm.show({
          title: `确认竞拍# ${this.res.name}？`,
          content: `${this.price} HM`,
          onConfirm() {
            if (that.price <= that.res.coin) {
              that.$vux.toast.text('出价必须大于当前价！')
              that.price = that.res.coin + 1;
              return
            }
            that.$http
              .post(`/auction/quoted`, {
                id: that.id,
                
                amount: that.price
              })
              
              .then(res => {
             // console.log(res.code)
                if (res.code == 200) {
                  that.$vux.toast.text(res.msg)
                } else if (res.code == 401) {
                	//console.log(res.code)
		                this.$vux.confirm.show({
		      		title: `登录超时`,
		      		onConfirm() {
		      			this.$router.push('/login')
		      		},
		      		 onCancel() {
		            that.$vux.toast.text('已取消')
		          }})
                }
                else if (res.code == 602) {
                  // 账户余额不足
                  that.$vux.confirm.show({
                    title: '余额不足',
                    content: '账户余额不足，无法参与竞拍！',
                    confirmText: '去充值',
                    onCancel() {},
                    onConfirm() {
                      that.$router.push('/mine?recharge=1')
                    }
                  })
                } else {
                  that.$vux.toast.text(res.msg)
                }
              })
              .catch(function(error) {});
          },
          onCancel() {
            that.$vux.toast.text('已取消')
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .panel {
    padding: 12px 0;
  }
  .monkey {
    text-align: center;
    border-bottom: 1px solid #dfdfdf;
    padding: 10px 0;
    img {
      width: 100%;
      height: 100%;
    }
    p {
      font-size: 12px;
      color: $tmdark;
    }
  }
  .auction {
    display: flex;
    position: relative;
    padding: 10px 0;
    &>div {
      width: 50%;
      white-space: nowrap;
      text-align: center;
      h3 {
        font-size: 18px;
        color: $green;
        span {
          font-size: 18px;
          color: $gray;
        }
      }
      span {
        font-size: 12px;
        color: $grey;
      }
    }
    &:before {
      content: '';
      display: block;
      position: absolute;
      top: 15px;
      left: 50%;
      width: 1px;
      height: 40px;
      background-color: #dfdfdf;
    }
  }
  @media screen and (max-width: 370px) {
    .auction {
      div {
        h3 {
          font-size: 16px;
          span {
            font-size: 16px;
          }
        }
      }
    }
  }
  .records {
    margin-top: 20px;
    padding: 0 12px;
    h3 {
      font-size: 18px;
      color: $gray;
    }
    .table {
      margin-top: 10px;
      font-size: 14px;
      color: $grey;
      white-space: nowrap;
      li {
        display: flex;
        div {
          width: 33%;
          overflow: hidden;
          &:nth-child(1) {
            text-overflow: ellipsis;
          }
          &:nth-child(2) {
            text-align: center;
          }
          &:last-child {
            text-align: right;
          }
        }
        &:first-child {
          border-bottom: 1px solid #dfdfdf;
          color: $red;
        }
      }
    }
    .total {
      font-size: 12px;
      color: $gray;
      text-align: center;
      margin-top: 15px;
    }
  }
  .bar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 58px;
    display: flex;
    border: 1px solid #dfdfdf; // background-color: #dfdfdf;
  }
  .page {
    // overflow-y: hidden;
    padding-bottom: 100px;
  }
  .buy {
    width: 40%;
    border-radius: 0;
    &:after {
      border-radius: 0;
    }
  }
  .rules {
    margin-top: 20px;
    padding: 0 12px;
    h3 {
      font-size: 18px;
      color: $gray;
    }
    p {
      font-size: 12px;
      color: $grey;
      word-break: break-all;
      span {
        color: $link;
      }
    }
  }
  .dialog {
    h2 {
      font-size: 16px;
      padding-top: 10px;
    }
    .brief {
      color: $gray;
    }
    .content {
      font-size: 12px;
      text-align: left;
      padding: 12px;
      max-height: 400px;
      overflow-y: scroll;
      .step {
        h3 {
          font-size: 16px;
          padding: 10px 0 5px;
        }
        p {
          color: #000;
        }
        span {
          color: $red;
        }
      }
      .tip {
        color: $grey;
        padding: 10px 0;
      }
    }
  }
</style>

<style lang="scss">
  .bar {
    .input {
      height: 100%;
      width: 60%;
      .weui-cells {
        height: 100%;
        &:before {
          display: none;
          border-top: none;
        }
        .weui-cell {
          height: 100%;
          padding: 0;
          &:before {
            display: none;
            border-top: none;
          }
        }
      }
      div {
        height: 100%;
      }
      .weui-cell__ft {
        &>div {
          width: 100%;
          display: flex;
        }
        .vux-number-selector {
          height: 100%;
          width: 50px;
          margin-right: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          border: none;
          border-radius: 0;
          svg {
            fill: #000;
          }
        }
        .vux-number-input {
          flex: 1;
          height: 100%;
          border: none;
        }
      }
    }
  }
</style>

<style lang="less" scoped>
  @import '~vux/src/styles/close';
</style>
